<template>
  <div class="component-wrapper" :style="{ wrapper_style, width: w + 'px', height: h + 'px', left: x + 'px', top: y + 'px' }">
    <div :style="title_style" class="title">{{ title }}</div>
  </div>
</template>

<script>
export default {
  props: ["id", "datas", "styles", "w", "h", "x", "y"],
  data() {
    return {
    };
  },
  created() {},
  activated() {},
  computed: {
    /** 样式 */
    wrapper_style() {
      const {
        padding_top,
        padding_bottom,
        padding_left,
        padding_right,
      } = this.datas;

      return `
                width: 100%;
                padding-top: ${padding_top}px;
                padding-bottom: ${padding_bottom}px;
                padding-left: ${padding_left}px;
                padding-right: ${padding_right}px;
            `;
    },

    /** 标题样式 */
    title_style() {
      const {
        text_style,
        text_align,
        text_size,
        text_color
      } = this.datas;
      return `
                font-weight: ${text_style.includes('1')?'bold':''};
                font-style: ${text_style.includes('2')?'italic':''};
                text-align: ${text_align};
                font-size: ${text_size}px;
                color: ${text_color};
            `;
    },
    /** 标题 */
    title() {
      return this.datas.title || '文本标签占位符';
    },
  },
  methods: {}
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .component-wrapper {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-decoration: none;
    position: relative;
  }
</style>
